<script setup lang="ts">
import { useToggle } from '@vueuse/shared'
import { useDark } from "@vueuse/core";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue"
import { BorderBox11 } from '@kjgl77/datav-vue3'
import {ref, reactive, toRefs} from 'vue'
import { useRoute, useRouter } from "vue-router";
import ECharts from  '@/components/Echart.vue'
import HighCharts from '@/components/HighCharts.vue'
// 获取路由信息
import { userStore} from '@/store/store'
const user = userStore()
let route = useRoute();
const router = useRouter();
//Souchong
var store = userStore();
store.setTitle("Souchong")
const title = store.getTitle
const theme = ref<boolean>(false)
const changTheme = () => {
  theme.value = !theme.value
  return theme;
}
let value1 = ref(4)
const config1 = reactive({
  data: [
    {
      name: '周口',
      value: 55,
    },
    {
      name: '南阳',
      value: 120,
    },
    {
      name: '西峡',
      value: 78,
    },
    {
      name: '驻马店',
      value: 66,
    },
    {
      name: '新乡',
      value: 80,
    },
    {
      name: '信阳',
      value: 45,
    },
    {
      name: '漯河',
      value: 29,
    },
  ],
  unit: '万元',
})
const isDark = useDark({
  // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
  storageKey: 'useDarkKEY',
  // 暗黑class名字
  valueDark: 'dark',
  // 高亮class名字
  valueLight: 'light',
})
const toggle = useToggle(isDark);
</script>
<template >
  <div class="demo">
    <div >
      <div >
        <div style="font-size: 3vh;font-weight: bolder">
          基于：Vue3 +  TypeScript + axios
          <br>
          <br>
          Element UI plus + DataV + echarts
        </div>
        <br>
        <img style="height: 20vh;width: 20vh" src="../assets/logo.png">

        <div>Vite</div>
        <img style="height: 80px;width: 80px" src="../assets/vite.svg">
        <div>这是一个深色模式的切换demo</div>
        <el-switch
            inline-prompt
            v-model="theme"
            @click="toggle()"
        >
        </el-switch>
      </div>

    </div>
    <div>
      <span style="font-size: 50px;padding-top: 30px">
        首页----{{title}}
      </span>
    </div>
    <div>
      <el-row class="mb-4" style="margin-top: 10%">
        <el-button >Default</el-button>
        <el-button type="primary" >Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </el-row>
      <el-row style="margin-top: 10%">
        <el-button :icon="Search" circle />
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="success" :icon="Check" circle />
        <el-button type="info" :icon="Message" circle />
        <el-button type="warning" :icon="Star" circle />
        <el-button type="danger" :icon="Delete" circle />
      </el-row>
    </div>
    <div>
      <BorderBox11 title="dv-border-box-11" :title-width="400" style="height: 300px">
      </BorderBox11>
    </div>
    <div>
      <ECharts></ECharts>
    </div>
    <div>
      <HighCharts></HighCharts>
    </div>

  </div>
</template>
<style scoped lang="less">

</style>
